<!DOCTYPE html>
<html>
<head>
    <title>JW7 View Demo</title>
    <link type="text/css" rel="stylesheet" href="styles/tests.css"  media="all" />
    <link type="text/css" rel="stylesheet" href="../../bin-debug/skins/beelden.css"  media="all" />
    <link type="text/css" rel="stylesheet" href="../../bin-debug/skins/bekle.css"  media="all" />
    <link type="text/css" rel="stylesheet" href="../../bin-debug/skins/five.css"  media="all" />
    <link type="text/css" rel="stylesheet" href="../../bin-debug/skins/glow.css"  media="all" />
    <link type="text/css" rel="stylesheet" href="../../bin-debug/skins/roundster.css"  media="all" />
    <!--<link type="text/css" rel="stylesheet" href="../../bin-debug/skins/seven.css"  media="all" />-->
    <link type="text/css" rel="stylesheet" href="../../bin-debug/skins/six.css"  media="all" />
    <link type="text/css" rel="stylesheet" href="../../bin-debug/skins/stormtrooper.css"  media="all" />
    <link type="text/css" rel="stylesheet" href="../../bin-debug/skins/vapor.css"  media="all" />

    <script src="../../node_modules/jquery/dist/jquery.js"></script>
    <script src="../../node_modules/underscore/underscore.js"></script>
</head>
<body>

<h1>Show the View with various states</h1>

<div id="video-container"></div>

<textarea style="width:400px; height:200px" id="modeljson"></textarea>

<!-- load requirejs library and run config.js -->
<script data-main="../config" src="../../node_modules/requirejs/require.js"></script>
<script type="text/javascript">
    /* jshint jquery: true */
    window.requireBaseUrl = document.location.href.replace(/[^\/]+\/[^\/]+\/[^\/]*$/, '');
    window.requireCallback = function() {
        require([
            'mock/mock-api',
            'mock/mock-model',
            'view/view',
            'css/jwplayer.less'
        ], function(mockApi, mockModel, View) {

            var m = _.extend({}, mockModel);
            m.setup();
            m.set('id', 'video-container');
            var $textarea = $('#modeljson');

            var view = new View(mockApi, m);

            view.setup();
            view.resize(400, 300);

            m.on('all', updateJson);
            updateJson();


            function updateJson() {
                if ($textarea.is(':focus')) {
                    return;
                }
                delete m.attrs.mediaContainer;
                delete m.attrs.mediaModel;
                $textarea.val(JSON.stringify(m.attrs, null, 4));
            }

            $textarea.keyup(function() {
                try {
                    var js = JSON.parse($(this).val());
                    $.each(js, function(key, val) {
                        m.set(key, val);
                    });
                } catch (e) {
                    console.log('invalid json');
                }
            });

            window.mockModel = m;
            document.getElementById('video-container').appendChild(view.element());
        });
    }
</script>

</body>
</html>
